Create a beautiful and modern glassmorphism loading animation using HTML and CSS only with this step-by-step tutorial. Perfect for web designers and developers.
Table of Contents
Glassmorphism is a user interface design trend that mimics the appearance of frosted glass. In this article, we will build an animated loader using a glassmorphism.
Glassmorphism is a design trend that involves creating user interface (UI) elements with a transparent or semi-transparent glass-like appearance. One common way to create a loading animation using this style is to use a spinning or pulsing circle or other geometric shape with a transparent or semi-transparent glass-like appearance. In this tutorial, we will show you how to create a glassmorphism loading animation using only HTML and CSS.
Let's start making an amazing glassmorphism loader Using HTML, and CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our glassmorphism loader. Let's break it down step by step:
1. <!DOCTYPE html>
- This defines the document type and version of HTML (HTML5 in this case).
2. <html lang="en">
- The root element of the page specifies that the language of the document is English.
3. <head> Section
<title>Glassmorphism Loader | Pure CSS</title>- Sets the title of the web page (displayed on the browser tab).
<meta charset="UTF-8">- Ensures the page supports special characters and multiple languages.
<meta name="viewport" content="width=device-width">- Makes the website responsive by adjusting the layout according to screen size.
<link rel="stylesheet" href="styles.css">- Links an external CSS file (styles.css) that contains the styling for the loader.
4. <body> Section
<div class="loader">- This is the main container for the loading animation.
<div style="--i: 1"></div>to<div style="--i: 4"></div>- These are four child div elements inside the loader.
- Each has a unique
--ivalue (custom CSS variable). - This is used in the CSS file to control the animation of each element separately.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glassmorphism effect. Let's break it down step by step:
1. Global Styling (* Selector)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}- Resets default margins and paddings for all elements to avoid unwanted spacing.
- box-sizing: border-box; ensures that padding and borders are included in the element’s total width and height.
2. Body Styling
body{
background: linear-gradient(to right, #917173, #2a3b36, #432c52);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}- Sets a linear gradient background with three color shades.
- Makes the body full-screen (height: 100vh;).
- Uses display: flex; to center the loader horizontally and vertically.
3. Loader Container
.loader{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}- Holds all the bouncing balls.
- position: relative; allows absolute positioning inside it.
- display: flex; centers the balls inside.
4. Glassmorphism Effect (loader::before)
.loader::before{
content:"";
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(8px);
position: absolute;
width: 140px;
height: 55px;
z-index: 20;
border-radius: 0 0 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.274);
border-top: none;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082);
animation: anim2 2s infinite;
}- Creates a semi-transparent, blurred box (Glassmorphism effect).
- backdrop-filter: blur(8px); adds a blur effect to the background.
- border-radius: 0 0 10px 10px; makes the bottom edges rounded.
- animation: anim2 2s infinite; applies a tilting animation.
5. Bouncing Balls (.loader div)
.loader div{
background: rgb(228, 228, 228);
border-radius: 50%;
width: 25px;
height: 25px;
z-index: -1;
animation: anim 2s linear infinite;
animation-delay: calc(0.3s* var(--i));
transform: translateY(5px);
margin: 0.2em;
}- Creates small bouncing circles with border-radius: 50%.
- animation: anim 2s linear infinite; makes them bounce up and down.
- animation-delay: calc(0.3s * var(--i)); staggers the animation for each ball.
- transform: translateY(5px); sets the initial position.
Custom Colors for Each Ball
.loader div:nth-child(2){
background: rgb(184, 219, 12);
}
.loader div:nth-child(3){
background: rgb(254, 12, 76);
}
.loader div:nth-child(4){
background: rgb(104, 80, 177);
}- Each child div has a different color, making the animation visually appealing.
6. Animations
Bouncing Animation (anim)
@keyframes anim {
0%, 100%{
transform: translateY(5px);
}
50%{
transform: translateY(-65px);
}
}- Moves balls up (-65px) and then brings them back down.
- This creates the bouncing effect.
Tilting Effect (anim2)
@keyframes anim2 {
0%, 100%{
transform: rotate(-10deg);
}
50%{
transform: rotate(10deg);
}
}- Slightly tilts the blurred container back and forth, making it look dynamic.
This will give our glassmorphism loader an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #917173, #2a3b36, #432c52);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.loader{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.loader::before{
content:"";
background:rgba(255, 255, 255, 0);
backdrop-filter: blur(8px);
position: absolute;
width: 140px;
height: 55px;
z-index: 20;
border-radius: 0 0 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.274);
border-top: none;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082);
animation: anim2 2s infinite;
}
.loader div{
background: rgb(228, 228, 228);
border-radius: 50%;
width: 25px;
height: 25px;
z-index: -1;
animation: anim 2s linear infinite;
animation-delay: calc(0.3s* var(--i));
transform: translateY(5px);
margin: 0.2em;
}
.loader div:nth-child(2){
background: rgb(184, 219, 12);
}
.loader div:nth-child(3){
background: rgb(254, 12, 76);
}
.loader div:nth-child(4){
background: rgb(104, 80, 177);
}
@keyframes anim {
0%, 100%{
transform: translateY(5px);
}
50%{
transform: translateY(-65px);
}
}
@keyframes anim2 {
0%, 100%{
transform: rotate(-10deg);
}
50%{
transform: rotate(10deg);
}
} Final Output:
Conclusion:
In this tutorial, we have shown you how to create a simple glassmorphism loading animation using only HTML and CSS. We started by creating the HTML skeleton and styling the container, then added the glassmorphism effect using a pseudo-element. Finally, we created the loading animation and added some final touches.
Remember, this tutorial is just a starting point. You can customize the animation and make it more complex by adding more CSS properties and effects. Experiment and have fun with it!
Loading animations are important for keeping users engaged while they wait for a website to load. By incorporating a glassmorphism effect, you can create a sleek and modern loading animation that is sure to impress your visitors.
We hope you found this tutorial helpful and that you learned something new. If you have any questions or feedback, please let us know in the comments below.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
